import { Button, Tooltip, Typography } from "antd"
import Link from "antd/es/typography/Link"
import dayjs from "dayjs"

import { FormatMessageProps } from "@/locales"
import { history } from "@/routes/history"

export const findLabelByValue = (value: number, array: Array<any>) => {
	const foundState = array.find(state => state.value == value.toString())
	return foundState ? foundState.label : null
}
export const handleCost = (value: string) => {
	const amount = parseFloat(value.replace(/[^\d.-]/g, ""))
	return amount.toFixed(4)
}
export const columnsTableInformation = (
	isCSV: boolean,
	formatMessage: FormatMessageProps,
	renderFormatWithCurrency: (value?: string | number | undefined, currencyStr?: "" | "$" | "￥" | undefined) => JSX.Element
) => [
	{
		title: formatMessage({ id: "member.serial_number" }),
		dataIndex: "serialNumber",
		key: "serial_number",
		width: 60,
		align: "center",
		render: (text: any, record: any, index: number) => index + 1
	},
	{
		dataIndex: "tableID",
		title: formatMessage({ id: "member.table_info.table_id" }),
		render: (value: any, record: any) => (
			<Link className="text-tableId" href={`/dxn/gameManager/cardTablesList/cardTablesBase?tableId=${record.tableCode}`}>
				{record.tableCode}
			</Link>
		),

		width: 150,
		align: "center",
		key: "table_id"
	},
	{
		dataIndex: "tableName ",
		title: formatMessage({ id: "member.table_info.table_name" }),
		render: (_text: any, record: any) => (
			<Tooltip placement="top" title={record.tableName}>
				<Typography.Text className="text-tableName" ellipsis>
					{record.tableName}
				</Typography.Text>
			</Tooltip>
		),

		width: 150,
		align: "center",
		key: "table_name"
	},
	{
		dataIndex: "state",
		title: formatMessage({ id: "member.table_info.state" }),
		width: 100,
		align: "center",
		key: "state",
		render: (value: any, record: any) => <p>{findLabelByValue(record.status, STATE(formatMessage))}</p>
	},
	{
		dataIndex: "PokerTableProfitAndLoss",
		title: formatMessage({ id: "member.table_info.poker_table_profit_and_loss" }),
		render: (value: any, record: any) => {
			const isNegative = record.costTotal < 0 ? true : false
			const amount = `${isNegative ? "-" : ""}$${(record.costTotal * (isNegative ? -1 : 1)).toLocaleString("en-US")}`
			return isCSV ? <p>{handleCost(amount)}</p> : <p className={isNegative ? "text-red" : "text-black"}>{amount}</p>
		},
		width: 100,
		align: "center",
		key: "poker_table_profit_and_loss"
	},
	{
		dataIndex: "membersAlwaysBringIn",
		title: formatMessage({ id: "member.table_info.members_always_bring_in" }),
		width: 100,
		render: (value: any, record: any) => {
			const amount = `$${record.bringInChipScore.toLocaleString("en-US")}`
			return isCSV ? <p>{handleCost(amount)}</p> : <p>{amount}</p>
		},

		align: "center",
		key: "members_always_bring_in"
	},
	{
		dataIndex: "NumberOfMembersIntroductions",
		title: formatMessage({ id: "member.table_info.number_of_member_introductions" }),
		render: (value: any, record: any) => <p>{record.userBringCount}</p>,

		width: 110,
		align: "center",
		key: "number_of_member_introductions"
	},
	{
		dataIndex: "squidBringInChipScore",
		title: formatMessage({ id: "member.table_info.squidBringInChipScore" }),
		render: (value: any, record: any) => <p>{renderFormatWithCurrency(record.squidBringInChipScore, record.currency)}</p>,
		width: 130,
		align: "center",
		key: "squidBringInChipScore"
	},
	{
		dataIndex: "createAt",
		title: formatMessage({ id: "member.table_info.starting_time" }),
		render: (value: any, record: any) => (
			<p>{record.tableBeginTime ? dayjs(new Date(+record.tableBeginTime)).format("YYYY-MM-DD HH:mm:ss") : "-"}</p>
		),

		width: 150,
		align: "center",
		key: "createAt"
	},
	{
		dataIndex: "updatedAt",
		title: formatMessage({ id: "member.table_info.end_time" }),
		render: (value: any, record: any) => {
			return (
				<div>
					<p>{record.tableEndTime ? dayjs(new Date(+record.tableEndTime)).format("YYYY-MM-DD HH:mm:ss") : "-"}</p>
				</div>
			)
		},

		width: 150,
		align: "center",
		key: "updatedAt"
	},
	{
		dataIndex: "gameName",
		title: formatMessage({ id: "member.table_info.game_name" }),
		render: (value: any, record: any) => <p>{findLabelByValue(record.gameTypeId, GAME(formatMessage))}</p>,

		width: 100,
		align: "center",
		key: "game_name"
	},
	{
		dataIndex: "clubId",
		title: formatMessage({ id: "member.table_info.club_id" }),
		render: (value: any, record: any) => (
			<p>
				{record.clubId ? (
					<div
						onClick={() => {
							history.push(`/dxn/clubManager/clubList?clubId=${record.clubId}`)
						}}
						className="blueColor decoration"
					>
						{record.clubId}
					</div>
				) : (
					"-"
				)}
			</p>
		),

		width: 100,
		align: "center",
		key: "club_id"
	},
	{
		dataIndex: "operate",
		title: formatMessage({ id: "member.table_info.operate" }),
		render: (value: any, record: any) => {
			return (
				<Button type="primary">
					<Link href={`/dxn/gameManager/cardTablesList/cardTablesBase?tableId=${record.tableCode}`}>
						{formatMessage({ id: "member.table_info.more" })}
					</Link>
				</Button>
			)
		},
		fixed: "right",
		width: 100,
		align: "center",
		key: "operate"
	}
]
export const STATE = (formatMessage: FormatMessageProps) => [
	{ value: "0", label: formatMessage({ id: "member.table_info.has_not_started" }) },
	{ value: "1", label: formatMessage({ id: "member.table_info.in_progress" }) },
	{ value: "2", label: formatMessage({ id: "member.table_info.over" }) }
]
export const GAME = (formatMessage: FormatMessageProps) => [
	{ value: "1", label: formatMessage({ id: "member.table_info.texas_hold_em" }) },
	{ value: "2", label: formatMessage({ id: "member.table_info.short_deck" }) },
	{
		value: "3",
		label: formatMessage({ id: "member.table_info.AOF_Texas" })
	},
	{
		value: "4",
		label: formatMessage({ id: "member.table_info.AOF_short_deck" })
	}
]
